<template>
    <div>
            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{CountUsers}}</div>
                                    <div>会员数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-lx-goodsfill grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{CountPrize}}</div>
                                    <div>抽奖人数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                     <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-lx-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{CountDay}}</div>
                                    <div>中奖商品数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
    </div>
</template>

<script>
    import Schart from 'vue-schart';
    import bus from '../components/common/bus';
    export default {
        name: 'index',
        data() {
            return {
                name: localStorage.getItem('ms_username'),
                CountUsers: [],
                CountPrize:[],
                CountDay:[],
            }
        },
        components: {
            Schart
        },
        computed: {
            role() {
                return this.name === 'admin' ? '超级管理员' : '普通用户';
            }
        },
        created(){
            this.getData();
            this.getPrize();
            this.getDay();
            this.handleListener();
            this.changeDate();
        },
        activated(){
            this.handleListener();
        },
        deactivated(){
            window.removeEventListener('resize', this.renderChart);
            bus.$off('collapse', this.handleBus);
        },
        methods: {
            handleListener(){
                bus.$on('collapse', this.handleBus);
                // 调用renderChart方法对图表进行重新渲染
                window.addEventListener('resize', this.renderChart)
            },
            getData() {
                this.$axios({
                    method: 'get',
                    url: 'http://local.guoxiaojian.com/admin/Dashboard/CountUsers',
                }).then((data) => {
                  this.CountUsers=data.data.data;
                    console.log(this.CountUsers);
                }).catch((data) => {
                    console.log(data)
                })
            },
            getPrize() {
                this.$axios({
                    method: 'get',
                    url: 'http://local.guoxiaojian.com/admin/Dashboard/CountPrize',
                }).then((data) => {
                    this.CountPrize=data.data.data;
                    console.log(this.CountPrize);
                }).catch((data) => {
                    console.log(data)
                })
            },
            getDay() {
                this.$axios({
                    method: 'get',
                    url: 'http://local.guoxiaojian.com/admin/Dashboard/CountDay',
                }).then((data) => {
                    this.CountDay=data.data.data;
                    console.log(this.CountDay);
                }).catch((data) => {
                    console.log(data)
                })
            },
            handleBus(msg){
                setTimeout(() => {
                    this.renderChart()
                }, 300);
            },
            renderChart(){
                this.$refs.bar.renderChart();
                this.$refs.line.renderChart();
            }
        }
    }

</script>


<style scoped>
    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }

    .user-info-cont div:first-child {
        font-size: 30px;
        color: #222;
    }
    .user-info-list span {
        margin-left: 70px;
    }

    .mgb20 {
        margin-bottom:50px;
        left:200px;
        top:180px;
    }

</style>
